{extend name="public/base"}

{block name="title"}幸运九宫格{/block}

{block name="style"}
    <link rel="stylesheet" href="__STATIC__/home/css/index.css" />
    <link rel="stylesheet" href="__STATIC__/home/jquery_weui/css/weui.min.css" />
    <link rel="stylesheet" href="__STATIC__/home/jquery_weui/css/jquery-weui.css" />
    <link rel="stylesheet" href="__STATIC__/home/css/xyjgg_base.css" />
    <style>
        .loading{
            background: url('__STATIC__/home/images/xyjgg/w2.png') 50% 50%/cover no-repeat ;
        }
        .logo,.logo1{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            text-align: center;
        }
        .logo img{
            height: 100%;
            width: auto;
        }
        .bb{
            position: absolute;
            top: 0;
            right:13%;
        }
        .bb img{
            width: 2rem;
            height: auto;
        }
        .music img{
            width: 1.4rem;
            height: auto;
        }
        .music{
            position: absolute;
            top: 5%;
            right: 2%;
            display:none;
        }
        .luck-unit-0,.luck-unit-2,.luck-unit-4 {
            text-align: center;
            background-image: url(__STATIC__/home/images/xyjgg/dd1.png);
            background-size: 100% 100%;
        }
        .luck-unit-1 {
            text-align: center;
            background-image: url(__STATIC__/home/images/xyjgg/dd2.png);
            background-size: 100% 100%;
        }
        .luck-unit-3{
            text-align: center;
            background-image: url(__STATIC__/home/images/xyjgg/dd4.png);
            background-size: 100% 100%;
        }
        .luck-unit-5 {
            text-align: center;
            background-image: url(__STATIC__/home/images/xyjgg/dd3.png);
            background-size: 100% 100%;
        }
        .luck-unit {
            width: 33%;
            height: 5rem;
            background-repeat: no-repeat;
            align-self: center;
            align-items: center;
            display: flex;
        }
        .luck-unit.active {
            background-image: url(__STATIC__/home/images/xyjgg/jiang.png?0.55156);
        }
        .luck-unit img{
            width: 3rem;
            height: auto;
        }
        .luck-unit-0 img{
            width: 3.5rem;
        }
        #luck{
            height: 100%;
            width: 80%;
            margin: 0 auto;
        }
        .row{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        table{
            width: 100%;
        }
        .luck-unit-1,.luck-unit-4{
            margin:0 2px;
        }
        .row{
            margin-top: 1px;
        }
        .row1{
            margin-top: 3px;
        }
        .bg-success {
            background-color: #f41b08;
        }
        #btn{
            background: url("__STATIC__/home/images/xyjgg/w4.png?0.1515")  50% 50%/cover no-repeat;
            width: 236px;
            height: 75px;
            position: absolute;
            margin:auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .share_title .shareImg {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4.5rem;
            margin-top: -6.5rem;
            width: 9rem;
            z-index: 200;
        }
        .share_title p{
            margin-top: 5px;
            line-height: 16px;
            font-weight:bold;
        }
        .share_title a{
            line-height: 18px;
            font-weight:bold;
            color:#fff;
        }
        .share_title1 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #333;
            opacity: .3;
        }
        .share_title {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            display: none;
        }
        .title2 img{
            width:0.9rem;
            height:0.9rem;
            display: inline;
        }
        p.text-center{
            text-align: center;
            font-size:14px;
        }
        .gif{
            width: 10.5rem;
            height: auto;
            position: sticky;
            margin: auto;
            top: 0;
            left: 38%;
            right: 0;
            bottom: 0;
            z-index:100;
        }
        #body{
            position:fixed;
            background:#000;
            opacity:1;
            filter:alpha(opacity=80);
            left:0;top:0;
            z-index:1;
            width:100%;
            height:100%;
        }
        .micon-cnav{
            display: none;
        }
    </style>
{/block}

{block name="main"}
<body >
<div class="pageControl loading bg-f7" id="body">

    <div class="pl">
        <img src="__STATIC__/home/images/xyjgg/cc_top.png" alt="">
        <div class="bb">
            <img src="__STATIC__/home/images/xyjgg/bbb.gif" alt="">
        </div>
        <div class="music">
            <img src="__STATIC__/home/images/xyjgg/w6.png" alt="">
        </div>
    </div>
    <div class="pl">
        <img src="__STATIC__/home/images/xyjgg/cc2.png" alt="">
        <div class="logo">
            <div id="luck"><!-- luck -->
                <table style="border-spacing:.08rem .03rem;">
                    <tr class="row">
                        <td class="luck-unit luck-unit-0"><img src="__STATIC__/home/images/xyjgg/p1.png"></td>
                        <td class="luck-unit luck-unit-1"><img src="__STATIC__/home/images/xyjgg/p2.png"></td>
                        <td class="luck-unit luck-unit-2"><img src="__STATIC__/home/images/xyjgg/p3.png"></td>
                    </tr>
                    <tr  class="row row1">
                        <td class="luck-unit luck-unit-5"><img src="__STATIC__/home/images/xyjgg/p4.png"></td>
                        <td class="luck-unit luck-unit-4"><img src="__STATIC__/home/images/xyjgg/p5.png"></td>
                        <td class="luck-unit luck-unit-3"><img src="__STATIC__/home/images/xyjgg/p6.png"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="logo1">
            <img src="__STATIC__/home/images/xyjgg/w3.png" alt="">
        </div>
    </div>
    <div>
        <img src="__STATIC__/home/images/xyjgg/cc3.png" alt="">
    </div>
    <div class="pl">
        <img src="__STATIC__/home/images/xyjgg/cc4.png" alt="">
        <div class="logo" id="btn">
        </div>
    </div>
    <div>
        <img src="__STATIC__/home/images/xyjgg/cc5.png" alt="">
    </div>

    <input type="hidden" value="{$nickname}" class="nickname" />
    <input type="hidden" value="{$openid}" class="openid" />
    <input type="hidden" value="{$headimgurl}" class="headimgurl" />
    <input type="hidden" value="{$subscribe}" class="subscribe" />

</div>
<div class="gif">
    <img src="__STATIC__/home/images/xyjgg/share.gif">
</div>
<div class="share_title">
    <div class="share_title1"></div>
    <div class="shareImg">
        <img src="__STATIC__/home/images/xyjgg/wx_jxtx.jpg" alt="">
        <p class="text-center">您还未关注公众号</p>
        <p class="text-center">  长按二维码关注公众号</p>
    </div>
</div>

<!--<embed src="http://xnx.oss-cn-shanghai.aliyuncs.com/%E6%81%AD%E5%96%9C%E5%8F%91%E8%B4%A2%E4%B9%8B%E4%B8%80%E5%AE%B6%E4%BA%BA%28Live%20%E4%BC%B4%E5%A5%8F%E7%89%88%29.mp3" hidden="true" loop='true' autostart="true"></embed>-->

</body>
{/block}

{block name="javascript"}
<script src="__STATIC__/home/jquery_weui/js/swiper.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- jquery-2.1.4 -->
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/jquery-weui.min.js"></script>
<script>
    var nickname = $('.nickname').val();
    var headimgurl = $('.headimgurl').val();
    var openid = $('.openid').val();
    wx.config({
//        debug: true,
        appId: '{$signPackage.appId}',
        timestamp: {$signPackage.timestamp},
        nonceStr:'{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'hideMenuItems'
        ]
    });
    wx.ready(function () {
        // 在这里调用 API
        wx.checkJsApi({
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'hideMenuItems'
            ],
            success: function (res) {
//                alert(JSON.stringify(res));
            }
        });

        wx.onMenuShareTimeline({
            title: '就行天下给您送旺啦，开门大吉，接旺接红包！', // 分享标题
            desc : '春节不打烊，红包送不停，请用力猛戳',
            link: window.location.href,// 分享链接
            imgUrl: 'http://jx.mgtvshop.com/static/home/images/xyjgg/pay.png', // 分享图标
            success: function () {
                alert('感谢您的分享!');
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                alert('取消发送!');
                // 用户取消分享分享后执行的回调函数
            }
        });

        wx.onMenuShareAppMessage({
            title: '就行天下给您送旺啦，开门大吉，接旺接红包！', // 分享标题
            desc : '春节不打烊，红包送不停，请用力猛戳',
            link: window.location.href,// 分享链接
            imgUrl: 'http://jx.mgtvshop.com/static/home/images/xyjgg/pay.png', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                alert('感谢您的分享!');
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                alert('取消发送!');
                // 用户取消分享分享后执行的回调函数
            }
        });
        wx.hideMenuItems({
            menuList: ['menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone', "menuItem:copyUrl", 'menuItem:openWithQQBrowser', 'menuItem:share:email', 'menuItem:openWithSafari'] // 要显示的菜单项，所有menu项见附录3
        });
    });
</script>

<script>
    $(function () {
        var index;
        var openid = $('.openid').val();
        var nickname = $('.nickname').val();
        var headimgurl = $('.headimgurl').val();
        var music = document.getElementById("video");
        var t=$('.luck-unit').css('width');
        $('.luck-unit').css('height',t);
        //点击音乐播放或者暂停
        $('.music').click(function () {
            var t=$('.music img').attr('src')
            if(music.paused){
                $('.music img').attr('src','__STATIC__/home/images/xyjgg/w6.png');
                music.play();
            }else{
                $('.music img').attr('src','__STATIC__/home/images/xyjgg/w5.png');
                music.pause();
            }


            console.log()

        })


        var luck={
            cj:0,//中哪个奖 0为500元，1：100元，2：50元，3：1元，4：5元，5：10元
            index:3,	//当前转动到哪个位置，起点位置
            count:0,	//总共有多少个位置
            timer:0,	//setTimeout的ID，用clearTimeout清除
            speed:20,	//初始转动速度
            times:0,	//转动次数
            cycle:18,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize:-1,
            init:function(id){
                if ($("#"+id).find(".luck-unit").length>0) {
                    $luck = $("#"+id);
                    $units = $luck.find(".luck-unit");
                    this.obj = $luck;
                    this.count = $units.length;
                    $luck.find(".luck-unit-"+this.index).addClass("active");
                };
            },


            roll:function(){
                var index = this.index;
                var count = this.count;
                var luck = this.obj;
                $(luck).find(".luck-unit-"+index).removeClass("active");
                index += 1;
                if (index>count-1) {
                    index = 0;
                };
                $(luck).find(".luck-unit-"+index).addClass("active");
                this.index=index;
                return false;
            },
            stop:function(index){
                this.prize=index;
                return false;
            }
        };
        function roll(){
            luck.times += 1;
            luck.roll();
            if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
                clearTimeout(luck.timer);
                if(luck.cj==0){
                    var type = 2;

                    $.post(
                        "{:url('save_prize')}",
                            {openid: openid, nickname: nickname, type: type},
                        function (data){
                            if(data.code == 200){
                                alert('恭喜中奖获得湘女秀决赛门票');
                                window.location.href="http://xsfr.mgtvshop.com/index.php?s=home/dial/ticket_form&openid="+openid+"&headimgurl="+headimgurl;
                            }else{
                                alert(data.msg);
                            }
                        },'json'
                    )
                }else if(luck.cj==1){
                    $.toptip('恭喜中奖获得100元红包', 'success');
                }else if(luck.cj==2){
                    $.toptip('恭喜中奖获得50元红包', 'success');
                }else if(luck.cj==3){
                    var type = 1;
                    var money = 1;
                    $.post(
                        "{:url('save_prize')}",
                            {openid: openid, nickname: nickname, money: money, type: type},
                        function (data){
                            if(data.code == 200){
                                alert('恭喜中奖获得1元红包');
                                window.location.href="{:url('erweima')}";
                            }else{
                                alert(data.msg);
                            }
                        },'json'
                    )
                }else if(luck.cj==4){
                    $.toptip('恭喜中奖获得5元红包', 'success');
                }else if(luck.cj==5){
                    $.toptip('恭喜中奖获得10元红包', 'success');
                }
                luck.prize=-1;
                luck.times=0;
                click=false;
            }else{
                if (luck.times<luck.cycle) {
                    luck.speed -= 10;
                }else if(luck.times==luck.cycle) {
                    luck.prize = luck.cj;//最终中奖位置
                }else{
                    if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
                        luck.speed += 110;
                    }else{
                        luck.speed += 20;
                    }
                }
                if (luck.speed<40) {
                    luck.speed=40;
                };

                luck.timer = setTimeout(roll,luck.speed);

            }
            return false;
        }


        var click=false;
        window.onload=function(){
            luck.init('luck');
            $("#btn").click(function(){
                if(click) {
                    return false;
                }else{

                    var openid = $('.openid').val();

                    $.post(
                        "{:url('is_prize')}",
                            {openid: openid},
                        function (data){
                            if(data.code == -1){
                                $.post(
                                    "{:url('dial_data')}",
                                    function (data){
                                        var index = data.msg;
                                        luck.speed=100;
                                        luck.cj=index;
                                        roll();
                                        click=true;
                                        return false;
                                    },'json'
                                )
                            }else if(data.code == -2){
                                if(window.confirm(data.msg)){
                                    window.location.href="http://xsfr.mgtvshop.com/index.php?s=home/dial/ticket_form&openid="+openid+"&headimgurl="+headimgurl;
                                }else{
                                    return false;
                                }
                            }else if(data.code == -3){
                                if(window.confirm(data.msg)){
                                    window.location.href="http://xsfr.mgtvshop.com/index.php?s=home/dial/ticket_show&openid="+openid+"&headimgurl="+headimgurl+"&code="+data.code_img;
                                }else{
                                    return false;
                                }
                            }else{
                                alert(data.msg);
                            }
                        },'json'
                    )

                }

            });
        };
    })

</script>
<script>
    $(function (){
        var subscribe = $('.subscribe').val();
        if(subscribe == 1){
            $('.share_title').css({
                display:'none'
            })
        }else{
            $('.share_title').css({
                display:'block'
            })
            $('#body').css('opacity','0.5');
        }
    })
</script>
{/block}

